import { useMemo } from "react";

interface SvgIconProps {
	prefix?: string;
	name: string;
	color?: string;
	size?: number | string;
	className?: string;
}

const SvgIcon = (props: SvgIconProps) => {
	const { prefix = "icon", name, color, size = 16, className = "" } = props;
	const symbolId = useMemo(() => `#${prefix}-${name}`, [prefix, name]);
	return (
		<svg className={className} aria-hidden="true" width={size} height={size} fill={color}>
			<use href={symbolId} fill={color} />
		</svg>
	);
};
export default SvgIcon;
